<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <button id="btn">隐藏</button>
    <p>bbvfbs</p>
    <img src="1.jpg" alt="">
    <h1>vdkjbvkddfv</h1>
</div>


<script>
    window.onload = function () {

        //1.get element
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];

        //2.绑定事件
        btn.onclick = function () {
            //3 事件驱动
/*            var  box = document.getElementById("box");
            //显示元素文本
            console.log(box.innerHTML);//标签和内容
            console.log(box.innerText);*/ //文本内容

            if (this.innerText === "隐藏"){
                img.style.display = "none";
                this.innerText = "显示";

            }else{
                this.innerText = "隐藏";
                img.style.display = "block";
            }


        }
    }

</script>
</body>
</html>